<template>
  <div class="app">
    <h2>求和为：{{ sum }}</h2>
    <h2>名字为：{{ person.name }}</h2>
    <h2>年龄为：{{ person.age }}</h2>
    <h2>汽车为：{{ car }}</h2>
    <button @click="changeSum">sum+1</button>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="changePerson">修改整个人</button>
    <span>|</span>
    <button @click="changeBrand">修改品牌</button>
    <button @click="changeColor">修改颜色</button>
    <button @click="changeEngine">修改发动机</button>
  </div>
</template>

<script lang="ts" setup name="App">
import { shallowRef, shallowReactive } from 'vue'
/*
### `shallowRef`
1. 作用：创建一个响应式数据，但只对顶层属性进行响应式处理。
2. 用法：let myVar = shallowRef(initialValue);
3. 特点：只跟踪引用值的变化，不关心值内部的属性变化。
### 
*/
let sum = shallowRef(0)
let person = shallowRef({
  name: '张三',
  age: 18
})
let car = shallowReactive({
  barnd: '奔驰',
  options: {
    color: '红色',
    engine: 'V8'
  }
})
const changeSum = () => sum.value++
const changeName = () => person.value.name += '~'
const changeAge = () => person.value.age++
const changePerson = () => person.value = { name: 'tony', age: 99 }
/* ****************** */
/*
### shallowReactive`
1. 作用：创建一个浅层响应式对象，只会使对象的最顶层属性变成响应式的，对象内部的嵌套属性则不会变成响应式的
2. 用法：const myObj = shallowReactive({ ... });
3. 特点：对象的顶层属性是响应式的，但嵌套对象的属性不是。
*/
const changeBrand = () => car.barnd += '~'
const changeColor = () => car.options.color += '+'
const changeEngine = () => car.options.engine += '^'

/*
### 总结

 通过使用 [`shallowRef()`](https://cn.vuejs.org/api/reactivity-advanced.html#shallowref) 
 和 [`shallowReactive()`](https://cn.vuejs.org/api/reactivity-advanced.html#shallowreactive) 
 来绕开深度响应。
 浅层式 `API` 创建的状态只在其顶层是响应式的，对所有深层的对象不会做任何处理，避免了对每一个内部属性做响应式所带来的性能成本，
 这使得属性的访问变得更快，可提升性能。
*/
</script>


<style scoped>
.app {
  background-color: #ddd;
  border-radius: 10px;
  box-shadow: 0 0 10px;
  padding: 10px;
}

button {
  margin: 0 5px;
}
</style>